import { ModalSlideUpStaticMethods } from "@/components/composite/ModalSlideUp/main"
import { ModalSelector } from "@/pages/BetRecordPage/components/ModalSelector"
import styled from "@emotion/styled"
import { memo, useCallback, useMemo } from "react"
import { EnumSort, RefGameListItem } from "@/apis/home_page_constant_types"
import { CategoryGameBaseSelect } from "./CategoryGameBaseSelect"
import { ModalGameProvider } from "./ModalGameProvider"

const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7rem;
    flex-wrap: nowrap;
    padding: 12rem;
`

interface Props {
    sort: string
    setSort: (sort: string) => void
    brands: string[]
    setBrands: (d: string[]) => void
    gameProviderList: RefGameListItem[]
    setGameClassify: (d: string[]) => void
}

export const CategoryGameSelect = memo(
    ({ gameProviderList = [], sort, setSort, brands, setBrands }: Props) => {
        const brandVal = useMemo(() => {
            if (brands.length) {
                return `+${brands.length}`
            }
            return "All"
        }, [brands])

        const _openGameProviderModal = useCallback(() => {
            ModalSlideUpStaticMethods.open(
                "root",
                <ModalGameProvider
                    title={"Select Developer"}
                    selected={brands}
                    options={gameProviderList}
                    onSelect={setBrands}
                    onClose={() => {
                        ModalSlideUpStaticMethods.close("root")
                    }}
                />,
            )
        }, [brands, gameProviderList, setBrands])

        const _openSortModal = useCallback(() => {
            ModalSlideUpStaticMethods.open(
                "root",
                <ModalSelector
                    title={"Sort By"}
                    selected={sort}
                    options={Object.entries(EnumSort).map(([label, value]) => ({
                        label,
                        value,
                    }))}
                    onSelect={setSort}
                    onClose={() => {
                        ModalSlideUpStaticMethods.close("root")
                    }}
                />,
                {},
            )
        }, [sort, setSort])

        return (
            <Container>
                <CategoryGameBaseSelect
                    label="Sort by:"
                    val={sort || "Sorting desc"}
                    onClick={() => _openSortModal()}
                />
                <CategoryGameBaseSelect
                    label="Providers:"
                    val={brandVal}
                    onClick={() => _openGameProviderModal()}
                />
            </Container>
        )
    },
)
